<template>
  <div class="setting-container">
    <!-- User info section -->
    <div class="user-info">
      <div class="avatar-section">
        <div class="avatar" v-if="avatarPath">
          <img :src="avatarPath" alt="" />
        </div>
        <div v-else class="default-img">{{ studentName }}</div>
      </div>
      <div class="right-section">
        <div class="name">
          <span>{{ studentName }}</span>
          <img :src="gender === '男' ? nanIcon : nvIcon" class="gender" alt="" />
        </div>
        <div class="student-no">学号: {{ studentNo }}</div>
      </div>
    </div>

    <!-- Account settings -->
    <div class="account-settings">
      <h3 class="moduleTile"><strong>账号设置</strong></h3>
      <div class="setting-item" @click="toPersonalPage">
        <div class="left">
          <van-icon name="user"></van-icon>
          <span class="settingSelection">个人信息</span>
        </div>
        <div class="right">
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
      <div class="setting-item" @click="toPersonalPwdPage">
        <div class="left">
          <van-icon name="lock"></van-icon>
          <span class="settingSelection">修改密码</span>
        </div>
        <div class="right">
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
    </div>

    <!-- Logout button -->
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </div>
</template>

<script setup lang="ts">
import nanIcon from '@/assets/img/nan.png'
import nvIcon from '@/assets/img/nv.png'
// import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/user'
import { studentLogout } from '@/api/student'

const router = useRouter()
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const avatarPath = ref('')
const studentName = ref('')
const studentNo = ref('')
const gender = ref('')
// 初始化或更新用户信息
const updateUserInfo = () => {
  const info = userInfo.value
  if (info) {
    avatarPath.value = info.avatarPath || ''
    studentName.value = info.studentName || ''
    studentNo.value = info.studentNo || ''
    gender.value = info.gender || ''
    console.log('用户信息已更新:', info)
  } else {
    console.log('用户信息为空')
    // 可以选择重置数据或保持现状
  }
}

// 监听 userInfo 的引用变化
watch(
  userInfo,
  (newVal, oldVal) => {
    console.log('userInfo 引用变化:', newVal, oldVal)
    updateUserInfo()
  },
  { immediate: true },
)

// 额外监听 userInfo 对象内部变化（如果需要）
watch(
  () => JSON.stringify(userInfo.value),
  (newJson) => {
    console.log('userInfo 内容变化:', newJson)
    updateUserInfo()
  },
  { immediate: true },
)

const toPersonalPage = () => {
  router.push('/my/psersonal')
}
const toPersonalPwdPage = () => {
  router.push('/my/psersonalPwd')
}
const handleLogout = async () => {
  // Logout logic
  const res = await studentLogout()
  if (res.code == 200) {
    router.push('/login')
  }
}
</script>

<style scoped>
.setting-container {
  padding: 20px;
}

.user-info {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-bottom: 30px;
}
.right-section {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.settingSelection {
  margin-left: 10px;
}

.name {
  font-size: 14px;
  font-weight: bold;
}

.student-no {
  font-size: 12.254px;
  color: #666;
}

.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.default-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d9d9;
  margin-bottom: 15px;
}
.gender {
  width: 12px;
  margin-left: 3px;
}
.account-settings {
  margin-bottom: 30px;
}
.moduleTile {
  font-size: 14px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  font-size: 12.25px;
}

.logout-btn {
  width: 100%;
  padding: 12px;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}
.avatar-section {
  font-size: 23px;
}
</style>
